<template>
	<view class="fe-popup-card">
		<view class="close" :style="closeStyle" @click="close">
			<basic-icons name="icon-cancel"/>
		</view>
		<view class="title" v-if="title">
			{{title}}			
		</view>
		<view class="content">
			<slot/>			
		</view>
		<!-- 安全区 -->
        <basic-safe-area />
	</view>
</template>
<script>
export default {
	name: 'fe-popup-card',
	props: {
		title: { type: String, default: null },
		closeStyle: { type: Object, default: ()=>{} },
	},
	methods: {
		close(){
			this.$emit('close')
		}
	}
}
</script>
<style lang="less">
.fe-popup-card{
	background: #fff;	
    border-radius: 20rpx 20rpx 0px 0px;
	.title{
		height: 128rpx;		
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 1px solid #EAEAEA;
	}
	.close{
		position: absolute;
		right: 30rpx;
		height: 128rpx;
		top: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #999;
		font-size: 40rpx;
	}
	.content{
		min-height: 100rpx;
	}
}
</style>